<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';

import { Select } from 'ant-design-vue';

import { registerList } from '#/api/register/personal';

interface Props {
  groupId?: number | string;
}

const props = withDefaults(defineProps<Props>(), {
  groupId: '',
});

const emit = defineEmits(['blur', 'change']);

watch(
  () => props.groupId,
  async (id) => {
    if (id) {
      await getGroupUserList(id);
    }
  },
  { immediate: true },
);

// const selectMode = ref(props.mode);
const userList = ref<any>([]);
const modelValue = defineModel<number | string>({
  default: () => undefined,
});

onMounted(async () => {
  if (props.groupId) {
    await getGroupUserList(props.groupId);
  }
});

async function getGroupUserList(groupId: number | string) {
  // console.log(groupId);
  const list = (await registerList({ groupId })) ?? [];
  userList.value = list.map((item) => {
    return { label: `${item.name} / ${item.companyName}`, value: item.id };
  });
}

function onChange() {
  emit('change', modelValue.value);
}
</script>
<template>
  <Select
    v-model:value="modelValue"
    class="w-full"
    placeholder="请选择"
    allow-clear
    show-search
    :options="userList"
    option-filter-prop="label"
    @blur="emit('blur')"
    @change="onChange"
  />
</template>
